<template>
	<div>
		<div style="overflow: hidden; margin-bottom: 15px">
			<el-button
				size="mini"
				type="primary"
				icon="el-icon-document-add"
				@click="() => $refs.import.click()"
				:loading="importLoading"
				>批量导入</el-button
			>
			<el-button size="mini" icon="el-icon-download" @click="downloadTemplate"
				><b>下载</b> 模板</el-button
			>
			<input type="file" ref="import" @change="uploadFile" hidden />
		</div>
		<el-table
			size="small"
			:data="validateFailList"
			border
			v-loading="valiateLoding"
			max-height="400px"
		>
			<el-table-column type="index" label="序号" />
			<el-table-column
				label="被保险人"
				prop="relationNames"
				width=""
			></el-table-column>

			<el-table-column
				label="投保总人数"
				prop="allCount"
				width=""
			></el-table-column>

			<el-table-column label="校验失败人数" prop="failCount" width="">
				<template slot-scope="scope">
					<span
						style="cursor: pointer; padding-right: 5px; color: blue"
						@click="onValidateMsg(scope.row)"
						>{{ scope.row.failCount }}</span
					>
				</template>
			</el-table-column>
			<!-- <el-table-column label="保全状态" width="120"></el-table-column> -->
		</el-table>
		<div style="text-align: center; margin-top: 10px">
			<el-button
				type="primary"
				@click="sure"
				v-show="valiateAll"
				:loading="submitLoding"
				>提交</el-button
			>
		</div>
		<el-dialog
			:visible.sync="validateFailVisible"
			title="校验失败原因"
			append-to-body
			width="400"
		>
			<div style="max-height: 64vh; margin-top: 15px; overflow-y: auto">
				{{ errorMsg }}
			</div>
		</el-dialog>
		<el-dialog
			:visible.sync="showSubmitFailList"
			title="批量投保结果"
			append-to-body
			width="85vw"
			max-height="65vh"
		>
			<div style="margin: 10px 0; display: flex; gap: 25px">
				<div>请求投保：{{ total.all }}条</div>
				<div>投保成功：{{ total.success }}条</div>
				<div>投保失败：{{ total.fail }}条</div>
			</div>
			<el-table
				size="small"
				:data="submitFailList.filter((row) => row.status == 2)"
				border
				v-loading="valiateLoding"
				max-height="400px"
			>
				<el-table-column type="index" label="序号" />
				<el-table-column
					label="被保险人"
					prop="relationNames"
					width=""
				></el-table-column>

				<el-table-column
					label="投保总人数"
					prop="allCount"
					width=""
				></el-table-column>
				<el-table-column
					label="保司校验失败人数"
					prop="insuranceFailCount"
					width=""
				>
					<template slot-scope="scope">
						<span
							style="cursor: pointer; color: blue"
							@click="onValidateMsg(scope.row)"
							>{{ scope.row.insuranceFailCount }}</span
						>
					</template>
				</el-table-column>
				<el-table-column label="投保状态" width="120">
					<template slot-scope="scope">
						<span>{{ scope.row.status == 1 ? '成功' : '失败' }}</span>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showSubmitFailList = false" style="width: 100px"
					>关 闭
				</el-button>
				<el-button type="primary" @click="showSubmitFailList = false">
					再次提交批量投保
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	uploadFile,
	downloadBatchInsuranceExcel,
	batchInsurancePersonBtn,
	batchInsuranceAnalysePerson
} from '@/api'
import { downloadByResponse } from '@/utils/download'
export default {
	emits: ['success'],
	data() {
		return {
			importLoading: false, // 预检验等待
			submitLoding: false, // 提交保司等待
			valiateLoding: false,
			// 预校验
			validateFailList: [], // 预校验失败列表
			validateFailVisible: false, // 预校验失败原因展示
			// 保司校验
			showSubmitFailList: false, // 保司校验失败列表展示
			submitFailList: [], // 保司校验失败列表
			submitFailVisible: false, // 保司校验失败列表失败原因展示
			errorMsg: ''
		}
	},
	props: {
		productId: String,
		startTime: String,
		endTime: String
	},
	methods: {
		downloadTemplate() {
			downloadBatchInsuranceExcel({
				productId: this.productId,
				startTime: this.startTime,
				endTime: this.endTime
			}).then(downloadByResponse)
		},
		sure() {
			const customers = this.validateFailList
				.map((row) => row.relationNames)
				.join(',')
			this.submitLoding = true
			batchInsurancePersonBtn({ customers, productId: this.productId })
				.then((res) => {
					const { data } = res
					var valid = data.every((row) => row.status == 1)
					if (!valid) {
						this.submitFailList = data.map((row) => {
							// 融入预校验的表，取一些已有的字段
							var valiateRow = this.validateFailList.find(
								({ relationNames: oldName }) => row.relationNames == oldName
							)
							return Object.assign({}, valiateRow, row)
						})
						this.showSubmitFailList = true
					} else {
						this.$message.success('投保成功')
						this.$emit('success')
					}
				})
				.finally(() => {
					this.submitLoding = false
				})
		},
		uploadFile(event) {
			var files = event.target.files
			const file = files[0]
			this.file = file
			event.target.value = ''
			var params = {}
			if (!this.file.name) {
				this.$message.error('请选择导入文件')
			}
			params.file = this.file
			this.importLoading = true
			uploadFile(params)
				.then((res) => {
					this.importLoading = false
					this.servFile = res
					this.analysePerson()
				})
				.catch(() => {
					this.importLoading = false
				})
		},
		analysePerson() {
			this.valiateLoding = true
			batchInsuranceAnalysePerson({
				type: 'service',
				fileId: this.servFile.fileId,
				productId: this.productId
			})
				.then((res) => {
					this.valiateLoding = false
					if (res.code == 2) {
						this.errorMsg = res.msg
						this.validateFailVisible = true
					} else {
						this.validateFailList = res.data
					}
				})
				.catch((err) => {
					console.error(err)
					this.valiateLoding = false
				})
		},
		onValidateMsg(row) {
			this.validateFailVisible = true
			this.errorMsg = row.errorMsg
		}
	},
	computed: {
		// 预校验通过
		valiateAll() {
			const { validateFailList } = this
			return (
				validateFailList.every((row) => row.failCount == 0) &&
				validateFailList.length
			)
		},
		total() {
			var { submitFailList } = this
			var all = 0,
				success = 0,
				fail = 0
			for (let row of submitFailList) {
				if (row.status == 1) {
					success += row.allCount
				} else {
					fail += row.allCount
				}
				all += row.allCount
			}
			return {
				all,
				success,
				fail
			}
		}
	}
}
</script>

<style lang="scss" scoped></style>
